<template>
  <div class="card" @click="toBangumi">
    <div class="cover">
      <img class="img" v-lazy="coverPath + coverSize" />
    </div>
    <div class="content">
      <p v-if="typeName" class="type"><i class="fa fa-tv"></i> {{ typeName }}</p>
      <p v-if="title" class="title" v-html="title"></p>
      <p v-if="area" class="area">地区：{{ area }}</p>
      <p v-if="formatActor" class="staff">演员：{{ formatActor }}</p>
      <p v-if="formatStaff" class="staff">{{ formatStaff }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilmItem',
  inject: ['rootRouter'],
  props: {
    // 类型名称
    typeName: {
      type: String
    },
    typeIcon: {
      type: String
    },
    coverPath: {
      type: String
    },
    // 封面图尺寸
    coverSize: {
      type: String,
      default: '@156w_208h_1c'
    },
    // 标题
    title: {
      type: String
    },
    // 地区
    area: {
      type: String
    },
    // 学员
    actor: {
      type: String
    },
    // 导演
    staff: {
      type: String
    },
    allParams: {
      type: Object
    }
  },
  computed: {
    formatActor () {
      return this.actor ? this.actor.replace(/[\t\n]/g, ',') : ''
    },
    formatStaff () {
      return this.staff ? this.staff.replace(/[\t\n]/g, ',') : ''
    }
  },
  methods: {
    toBangumi () {
      // 加ss 是标明是番剧的id ep是番剧的集数id
      this.rootRouter.push({ name: 'bangumi', params: { id: 'ss' + this.allParams.season_id } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .card {
    display: flex;
    padding: rem(10px);
    .cover {
      @include cover(156, 208, rem(2px));
      width: rem(78px);
      height: rem(104px);
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
    }
    .content{
      width: rem(260px);
      display: flex;
      flex-direction: column;
      margin-left: rem(10px);
      font-size: rem(14px);
      color: $color-text-primary;
      .fa {
        margin-right: rem(5px);
      }
      p {
        margin: rem(5px) 0 0 0;
        &:first-child{
          margin-top: 0;
        }
      }
    }
    .title{
      @include max-lines(2)
    }
    .area,.staff{
      margin-top: rem(5px);
      @include max-lines(1);
      color: $color-text-secondary;
      font-size: rem(12px);;
    }
  }
</style>
